<#import "spring.ftl" as spring>

<#-- ##################### 共通CSS ##################### -->
<#macro common_style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><@spring.message code="title"/></title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<#--favicon.ico图标-->
<link rel="icon" type="image/x-icon" href="${request.contextPath}/static/img/favicon.ico">
<#-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="${request.contextPath}/static/css/bootstrap/css/bootstrap.min.css">
<#-- Font Awesome -->
<link rel="stylesheet" href="${request.contextPath}/static/css/font-awesome/css/font-awesome.min.css">
<#-- ionicons -->
<link rel="stylesheet" href="${request.contextPath}/static/css/ionicons/css/ionicons.min.css">
<#-- Theme style -->
<link rel="stylesheet" href="${request.contextPath}/static/css/adminlte/AdminLTE.min.css">
<#-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="${request.contextPath}/static/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="${request.contextPath}/static/css/pace/pace.min.css">
<link rel="stylesheet" href="${request.contextPath}/static/css/datatables.net-bs/dataTables.bootstrap.min.css">


<#-- Morris chart -->
<#--<link rel="stylesheet" href="${request.contextPath}/css/morris/morris.css">-->
<#-- jvectormap -->
<#--<link rel="stylesheet" href="${request.contextPath}/css/jvectormap/jquery-jvectormap.css">-->
<#-- Date Picker -->
<#--<link rel="stylesheet" href="${request.contextPath}/css/bootstrap-datepicker/bootstrap-datepicker.min.css">-->
<#-- Daterange picker -->
<#--<link rel="stylesheet" href="${request.contextPath}/css/bootstrap-daterangepicker/daterangepicker.css">-->
<#-- bootstrap wysihtml5 - text editor -->
<#--<link rel="stylesheet" href="${request.contextPath}/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">-->

<#-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<#-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<#-- Google Font -->
<#--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
</#macro>


<#-- ##################### 共通js ##################### -->
<#macro common_script>
<#-- jQuery 3 -->
<script src="${request.contextPath}/static/js/jquery/jquery.min.js"></script>
<#-- jQuery UI 1.11.4 -->
<#--<script src="${request.contextPath}/js/jquery-ui/jquery-ui.min.js"></script>-->
<#-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<#--<script>-->
<#--$.widget.bridge('uibutton', $.ui.button);-->
<#--</script>-->
<#-- Bootstrap 3.3.7 -->
<script src="${request.contextPath}/static/js/bootstrap/bootstrap.min.js"></script>
<#-- Morris.js charts -->
<#--<script src="${request.contextPath}/js/raphael/raphael.min.js"></script>-->
<#--<script src="${request.contextPath}/js/morris/morris.js"></script>-->
<#-- Sparkline -->
<#--<script src="${request.contextPath}/js/jquery-sparkline/jquery.sparkline.min.js"></script>-->
<#-- jvectormap -->
<#--<script src="${request.contextPath}/js/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<#--<script src="${request.contextPath}/js/jvectormap/jquery-jvectormap-world-mill-en.js"></script>-->
<#-- jQuery Knob Chart -->
<#--<script src="${request.contextPath}/js/jquery-knob/jquery.knob.min.js"></script>-->
<#-- daterangepicker -->
<#--<script src="${request.contextPath}/js/moment/moment.min.js"></script>-->
<#--<script src="${request.contextPath}/js/bootstrap-daterangepicker/daterangepicker.js"></script>-->
<#-- datepicker -->
<#--<script src="${request.contextPath}/js/bootstrap-datepicker/bootstrap-datepicker.js"></script>-->
<#-- Bootstrap WYSIHTML5 -->
<#--<script src="${request.contextPath}/js/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>-->
<script src="${request.contextPath}/static/js/pace/pace.min.js"></script>
<#-- Slimscroll -->
<script src="${request.contextPath}/static/js/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<#-- FastClick -->
<script src="${request.contextPath}/static/js/fastclick/fastclick.js"></script>
<#-- AdminLTE App -->
<script src="${request.contextPath}/static/js/adminlte/adminlte.min.js"></script>
<#-- AdminLTE dashboard demo (This is only for demo purposes) -->
<#--<script src="${request.contextPath}/js/adminlte/pages/dashboard.js"></script>-->
<#-- AdminLTE for demo purposes -->
<#--<script src="${request.contextPath}/js/adminlte/demo.js"></script>-->
<script src="${request.contextPath}/static/js/datatables.net/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/static/js/datatables.net-bs/dataTables.bootstrap.min.js"></script>
<#--自定义js-->
<script src="${request.contextPath}/static/js/webconsole/common/common.js"></script>
<script>
    var base_url = '${request.contextPath}';
</script>
</#macro>


<#-- ##################### 共通头部 ##################### -->
<#macro header>
<header class="main-header">
<#-- Logo -->
    <a href="${request.contextPath}/index" class="logo">
        <#-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><i class="fa fa-globe" aria-hidden="true"></i></span>
        <#-- logo for regular state and mobile devices -->
        <span class="logo-lg"><@spring.message code="logo_title_lg"/></span>
    </a>

<#-- 头部菜单 -->
    <nav class="navbar navbar-static-top">
    <#-- 侧面菜单栏控制按钮-->
    <#-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>

        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
            <#-- 登陆用户名 -->
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="tooltip" title="Admnin"
                       data-placement="bottom">
                        <span class="">${(me.userName)!'游客'}</span>
                    </a>
                </li>
                <li class="">
                    <a href="#" onclick="language('cn_ZH')" class="dropdown-toggle" data-toggle="tooltip" data-placement="bottom">
                        <span class=""><@spring.message code="lang_china"/></span>
                    </a>
                </li>
                <li>
                    <a href="#" onclick="language('en_US')" class="dropdown-toggle" data-toggle="tooltip" data-placement="bottom">
                        <span class=""><@spring.message code="lang_english"/></span>
                    </a>
                </li>
            <#--退出按钮-->
                <li>
                    <a href="${request.contextPath}/logout" class="dropdown-toggle" data-toggle="tooltip" title="退出" data-placement="bottom">
                        <i class="fa fa-sign-out"></i>
                    </a>
                </li>
            <#--空白边距-->
                <li style="width: 30px;">
                </li>
            </ul>
        </div>
    </nav>
</header>
</#macro>

<#-- ##################### 共通菜单栏 ##################### -->
<#macro sidebar>
<aside class="main-sidebar">
<#-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
    <#-- 搜索菜单 search form -->
        <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="q" class="form-control" placeholder="Search...">
                <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
            </div>
        </form>
    <#-- /.search form -->


    <#-- 菜单栏 Sidebar Menu -->
        <ul class="sidebar-menu" data-widget="tree">
        <#-- Optionally, you can add icons to the links -->
            <li class="header">应用设置</li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-gears"></i><span>应用设置</span>
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="${request.contextPath}/app/appinfo"><i class="fa fa-circle-o"></i>应用管理</a></li>
                    <li ><a href="${request.contextPath}/menu/menuinfo"><i class="fa fa-circle-o"></i>菜单管理</a></li>
                    <li><a href="${request.contextPath}/user/userinfo"><i class="fa fa-circle-o"></i>用户管理</a></li>
                    <li><a href="${request.contextPath}/role/roleinfo"><i class="fa fa-circle-o"></i>角色管理</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-users"></i><span>系统设置</span>
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">
                    <li class="active"><a href="${request.contextPath}/index"><i class="fa fa-circle-o"></i>白名单管理</a></li>
                    <li class=""><a href="${request.contextPath}/index"><i class="fa fa-circle-o"></i>黑名单管理</a></li>
                    <li class=""><a href="${request.contextPath}/index"><i class="fa fa-circle-o"></i>令牌管理</a></li>
                </ul>
            </li>
            <li class="header">设置</li>
            <li class="treeview">
                <a href="#"><i class="fa fa-user"></i>
                    <span>系统设置</span>
                </a>
            </li>
        </ul>
    </section>
</aside>
</#macro>

<#-- ##################### 共通底部 ##################### -->
<#macro bottom>
<footer class="main-footer">
    <div class="pull-right hidden-xs">
        <b>Version</b> 0.0.2
    </div>
    <strong>Copyright &copy; 2020 Web Console.</strong> All rights reserved.
</footer>
</#macro>

<#-- ##################### 消息提示框 ##################### -->
<#macro pop_msg_box>

    <#--警告消息弹框-->
    <button type="button" id="warn-msg-btn" class="btn btn-warning" data-toggle="modal" data-target="#warn-msg-modal" style="display: none;">
                Launch Warning Modal
    </button>
     <div class="modal modal-warning fade" id="warn-msg-modal">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-body">
                     <p id="warn-msg-info" style="margin: 0px"></p>
                 </div>
             </div>
         </div>
     </div>

    <#--提示消息弹框-->
    <button type="button" id="info-msg-btn" class="btn btn-info" data-toggle="modal" data-target="#info-msg-modal" style="display: none;">
        Launch Info Modal
    </button>
    <div class="modal modal-info fade" id="info-msg-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p id="info-msg-info" style="margin: 0px"></p>
                </div>
            </div>
        </div>
    </div>

    <#--成功消息弹框-->
    <button type="button" id="success-msg-btn" class="btn btn-success" data-toggle="modal" data-target="#success-msg-modal" style="display: none;">
        Launch Success Modal
    </button>
    <div class="modal modal-success fade" id="success-msg-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p id="success-msg-info" style="margin: 0px"></p>
                </div>
            </div>
        </div>
    </div>

    <#--删除弹框-->
    <button type="button" id="delete-msg-btn" class="btn btn-danger" data-toggle="modal" data-target="#delete-msg-modal" style="display: none;">
        Launch Danger Modal
    </button>
     <div class="modal modal-danger fade" id="delete-msg-modal">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span></button>
                     <h4 class="modal-title" style="text-align: center"><@spring.message code="com_oper_delete"/></h4>
                 </div>
                 <div class="modal-body">
                     <p><@spring.message code="com_oper_delete"/><span id="delete_content"></span>?</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" id="delete-cancle" class="btn btn-outline pull-left" data-dismiss="modal"><@spring.message code="com_oper_cancel"/></button>
                     <button type="button" id="delete-confirm" class="btn btn-outline ajax" data-dismiss="modal"><@spring.message code="com_oper_confirm"/></button>
                 </div>
             </div>
         </div>
     </div>
</#macro>